<template>
	<n-form size='small'>
		<n-radio-group v-model:value='radioValue'>
			<n-form-item>
				<n-radio :value="1">
					周，允许的通配符[, - * ? / L #]
				</n-radio>
			</n-form-item>

			<n-form-item>
				<n-radio :value="2">
					不指定
				</n-radio>
			</n-form-item>

			<n-form-item>
				<n-radio :value="3">
					周期从星期

				</n-radio>
				<n-select clearable v-model:value="cycle01" :options="weekList">
					<!-- <n-option v-for="(item,index) of weekList" :key="index" :value="item.value" :value="item.key"
						:disabled="item.key === 1">{{item.value}}</n-option> -->
				</n-select>
				-
				<n-select clearable v-model:value="cycle02" :options="weekList">
					<!-- <n-option v-for="(item,index) of weekList" :key="index" :value="item.value" :value="item.key"
						:disabled="item.key < cycle01 && item.key !== 1">{{item.value}}</n-option> -->
				</n-select>
			</n-form-item>

			<n-form-item>
				<n-radio :value="4">
					第

				</n-radio>
				<n-input-number v-model:value="average01" :min="1" :max="4">
				</n-input-number>
				周的星期
				<n-select clearable v-model:value="average02" :options="weekList">

				</n-select>
			</n-form-item>

			<n-form-item>
				<n-radio :value="5">
					本月最后一个星期

				</n-radio>
				<n-select clearable v-model:value="weekday" :options="weekList">
				</n-select>
			</n-form-item>

			<n-form-item>
				<n-radio :value="6">
					指定

				</n-radio>
				<n-select clearable v-model:value="checkboxList" :options="weekList" placeholder="可多选" multiple
					style="width:100%">

				</n-select>
			</n-form-item>
		</n-radio-group>


	</n-form>
</template>

<script>
	export default {
		data() {
			return {
				radioValue: 2,
				weekday: 2,
				cycle01: 2,
				cycle02: 3,
				average01: 1,
				average02: 2,
				checkboxList: [],
				weekList: [{
						value: 2,
						label: '星期一'
					},
					{
						value: 3,
						label: '星期二'
					},
					{
						value: 4,
						label: '星期三'
					},
					{
						value: 5,
						label: '星期四'
					},
					{
						value: 6,
						label: '星期五'
					},
					{
						value: 7,
						label: '星期六'
					},
					{
						value: 1,
						label: '星期日'
					}
				],
				checkNum: this.check
			}
		},
		name: 'crontab-week',
		props: ['check', 'cron'],
		methods: {
			// 单选按钮值变化时
			radioChange() {
				if (this.radioValue !== 2 && this.cron.day !== '?') {
					this.$emit('update', 'day', '?', 'week');
				}
				switch (this.radioValue) {
					case 1:
						this.$emit('update', 'week', '*');
						break;
					case 2:
						this.$emit('update', 'week', '?');
						break;
					case 3:
						this.$emit('update', 'week', this.cycleTotal);
						break;
					case 4:
						this.$emit('update', 'week', this.averageTotal);
						break;
					case 5:
						this.$emit('update', 'week', this.weekdayCheck + 'L');
						break;
					case 6:
						this.$emit('update', 'week', this.checkboxString);
						break;
				}
			},

			// 周期两个值变化时
			cycleChange() {
				if (this.radioValue == '3') {
					this.$emit('update', 'week', this.cycleTotal);
				}
			},
			// 平均两个值变化时
			averageChange() {
				if (this.radioValue == '4') {
					this.$emit('update', 'week', this.averageTotal);
				}
			},
			// 最近工作日值变化时
			weekdayChange() {
				if (this.radioValue == '5') {
					this.$emit('update', 'week', this.weekday + 'L');
				}
			},
			// checkbox值变化时
			checkboxChange() {
				if (this.radioValue == '6') {
					this.$emit('update', 'week', this.checkboxString);
				}
			},
		},
		watch: {
			'radioValue': 'radioChange',
			'cycleTotal': 'cycleChange',
			'averageTotal': 'averageChange',
			'weekdayCheck': 'weekdayChange',
			'checkboxString': 'checkboxChange',
		},
		computed: {
			// 计算两个周期值
			cycleTotal: function() {
				this.cycle01 = this.checkNum(this.cycle01, 1, 7)
				this.cycle02 = this.checkNum(this.cycle02, 1, 7)
				return this.cycle01 + '-' + this.cycle02;
			},
			// 计算平均用到的值
			averageTotal: function() {
				this.average01 = this.checkNum(this.average01, 1, 4)
				this.average02 = this.checkNum(this.average02, 1, 7)
				return this.average02 + '#' + this.average01;
			},
			// 最近的工作日（格式）
			weekdayCheck: function() {
				this.weekday = this.checkNum(this.weekday, 1, 7)
				return this.weekday;
			},
			// 计算勾选的checkbox值合集
			checkboxString: function() {
				let str = this.checkboxList.join();
				return str == '' ? '*' : str;
			}
		}
	}
</script>